<script setup>
import {ElMessage} from 'element-plus'
import { h , ref, reactive} from 'vue'
import mangocrud from '@/components/magnxo_crud/index.vue'
import msggage from '@/utils/ActionMessage.js'
let mangoref = ref(null);
let dialogVisible = ref(false);
let showTbale = ref(false);
let inputlist=reactive([
  {value:''},
  {value:''},
  {value:''}])
const list = {
  showselection:true,
  showindex:true,
  searchForm: {
    toolbars: [
      { key: "search" },
      { key: "addAll", label: "全部授权" },
      { key: "reset", label: "重置" },
    ],
  },
  operatebtn:[
      { key: "add", label: "添加" ,type: "primary"},
      { key: "delet", label: "删除",type: "danger" },
  ],
  columns: [
    { label: "名字", property: "value" },
    { label: "图片", property: "img", slotName: "img"},
  ],
  pagination:{
    limit:5,
    page:1,
    totalKey:0
  }
};
let listConfig = reactive(list);
const paginationchange=(page)=>{
  console.log(page)
  msggage.success(page)
  listConfig.pagination.limit =  page["limit"];
  listConfig.pagination.page =  page["page"];
    console.log(page)
}
const handleAction = (command, position, selection, data) => {
  console.log(command, position, selection, data);
  switch (command) {
    case "add": // 查询
      dialogVisible.value = true;
      break;
    case "reset": //重置
      reset();
      break;
    default:
      break;
  }
};
let optionslist = [
  {
    value: "麻辣烫",
    label: "麻辣烫",
    img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171201%2Fff75480db7884c74beb2a3e72b35b37b.'
  },
  {
    value: "关东煮",
    label: "关东煮",
    img:'https://img1.baidu.com/it/u=2355898529,4011268083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    value: "麻辣香锅",
    label: "麻辣香锅",
    img:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00075-1214.jpg'
  },
  {
    value: "清淡炒菜",
    label: "清淡炒菜",
    src:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00655-2047.jpg'
  },
  {
    value: "辣椒炒菜",
    label: "辣椒炒菜",
    src:'https://img0.baidu.com/it/u=701185821,1849981127&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
  },
  {
    value: "冒菜",
    label: "冒菜",
    src:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00167-1310.jpg'
  },
  {
    value: "轻食",
    label: "轻食",
    src:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-3080.jpg'
  },
  {
    value: "麻辣拌",
    label: "麻辣拌",
    img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171201%2Fff75480db7884c74beb2a3e72b35b37b.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651593327&t=e8ce4a1903b3ad6778f8bb90d2713edf'
  },
  {
    value: "拌饭",
    label: "拌饭",
    src:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00756-1394.jpg'
  },
  {
    value: "炒米粉",
    label: "炒米粉",
    src:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00638-2860.jpg'
  },
  {
    value: "螺蛳粉",
    label: "螺蛳粉",
    src:'https://img0.baidu.com/it/u=2365144078,1664837876&fm=253&fmt=auto&app=138&f=JPEG?w=540&h=360'
  },
  {
    value: "米线",
    label: "米线",
    src:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00520-4259.jpg'
  },
];
let srcList = reactive([]);
let tableData = ref(optionslist);
listConfig.pagination.totalKey=tableData.value.length

optionslist.map(item=>{
  srcList.push(item.img)
})
const getcaipiao=()=>{
			var arr = new Array();
			for(var i = 0; i < 6; i++) {
				//var n = Math.random() * 20 + 0;
				//n = Math.round(n);//四舍五入取整
                                var n = parseInt(Math.random()*33+1);//随机生成整形数
				if(arr.length == 0) {
					arr.push(n);    //从末尾插入数组
				} else {
                        //indexOf判断数组中是否有元素n,如果没有输出-1，如果有输出位置
					if(arr.indexOf(n) < 0) {
						arr.push(n);
					} else {
						i--;
					}
 
				}
			}
      console.log()
        ElMessage({
    message: h('p', null, [
      h('span', null, `红号,${arr.toString()},蓝号,${parseInt(Math.random()*16+1)}`),
    ]),
  })
}
const click=()=>{
    //随机数 0-12
    let index=Math.floor(Math.random()*12)
     ElMessage({
    message: h('p', null, [
      h('span', null, `小胡今天吃${tableData.value[index].label||'大米饭'}`),
      h('img', { style: 'color: teal;width:100px;height:100px',src: tableData.value[index].img}),
    ]),
  })
    console.log(Math.floor(Math.random() * 14)-1)
  // msggage.success(`今天吃${options[Math.floor(Math.random() * 13)]?.value||'大米饭    '}`)
}
</script>
<template>
 
  <div class="xxiaohu">
    <el-button type="primary" round @click="click">小胡点这里</el-button>
    <el-button type="primary" round @click="showTbale=!showTbale">显示菜单表格</el-button>
    <el-button type="primary" round @click="getcaipiao">获取你的双色球彩票</el-button>
     <mangocrud
     v-show="showTbale"
    ref="mangoref"
        :tableData="
      tableData.slice(
        (listConfig.pagination.page - 1) * listConfig.pagination.limit,
        listConfig.pagination.page * listConfig.pagination.limit
      )
    "
    :listConfig="listConfig"
    @handleAction="handleAction"
    @pagination-change="paginationchange"
  >
    <template #img="scope"> 
      <!-- {{paginationchange(scope)}} -->
      <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.img"
      :preview-src-list="srcList"
      :initial-index="scope.scope.$index"
      fit="cover"
    />
  </div>
    </template>
  </mangocrud>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
  >
     <el-input v-for="o in inputlist" :key="o" v-model="o.value" placeholder="Please input" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<style lang="scss">
.box-card{
    height: 99%;
    .demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
}
</style>
